<!--
 * @Author: yushuang
 * @Date: 2024-12-16 10:20:05
 * @LastEditors: yushuang
 * @LastEditTime: 2024-12-20 10:34:16
 * @Description: 
-->
<script setup lang="ts">
import { computed, watch } from 'vue';
import { storeToRefs } from 'pinia';
import { pick } from '@v-c/utils';
import { useAppStore } from '@/stores/app';
import { useUserStore } from '@/stores/user';
import { useLayoutMenu } from '@/stores/layout-menu';
import { animationNameList } from '@/config/default-setting';
import { useQueryBreakpoints } from '@/composables/query-breakpoints';
import BasicLayout from './basic-layout/index.vue';
import SettingDrawer from './components/setting-drawer/index.vue';
import MultiTab from './multi-tab/index.vue';
import RouteView from './components/route-view.vue';
import UserAvatar from '@/components/user-avatar/index.vue';

defineOptions({
  name: 'ProLayout'
});
const appStore = useAppStore();
const { layoutSetting } = storeToRefs(appStore);
const userStore = useUserStore();
const layoutMenu = useLayoutMenu();
const { selectedKeys, openKeys } = storeToRefs(layoutMenu);
const { isMobile, isPad } = useQueryBreakpoints();
watch(isPad, val => {
  if (val) appStore.toggleCollapsed(true);
  else appStore.toggleCollapsed(false);
});
const layoutProps = computed(() =>
  pick(appStore.layoutSetting, [
    'fixedHeader',
    'fixedSider',
    'splitMenus',
    'menuHeader',
    'header',
    'menu',
    'layout',
    'footer',
    'contentWidth',
    'compactAlgorithm'
  ])
);
</script>

<template>
  <BasicLayout
    :collapsed="layoutSetting.collapsed"
    :theme="layoutSetting.theme"
    :menu-data="userStore.menuData"
    v-bind="layoutProps"
    :selected-keys="selectedKeys"
    :open-keys="layoutSetting.layout === 'top' ? [] : openKeys"
    :copyright="layoutSetting.copyright"
    :is-mobile="isMobile"
    :logo="layoutSetting.logo"
    :title="layoutSetting.title"
    :accordion-mode="layoutSetting.accordionMode"
    :left-collapsed="layoutSetting.leftCollapsed"
    :header-height="layoutSetting.headerHeight"
    @update:open-keys="layoutMenu.handleOpenKeys"
    @update:selected-keys="layoutMenu.handleSelectedKeys"
    @update:collapsed="appStore.toggleCollapsed"
  >
    <template #headerActions>
      <UserAvatar />
    </template>
    <template #contentPrefix>
      <MultiTab v-if="layoutSetting.multiTab" />
    </template>
    <template #renderFooterLinks />
    <RouteView />
  </BasicLayout>
  <SettingDrawer
    v-model:open="layoutSetting.drawerVisible"
    :theme="layoutSetting.theme"
    :color-primary="layoutSetting.colorPrimary"
    :multi-tab="layoutSetting.multiTab"
    :multi-tab-fixed="layoutSetting.multiTabFixed"
    :animation-name-list="animationNameList"
    :animation-name="layoutSetting.animationName"
    :keep-alive="layoutSetting.keepAlive"
    :accordion-mode="layoutSetting.accordionMode"
    :left-collapsed="layoutSetting.leftCollapsed"
    :watermark="layoutSetting.watermark"
    v-bind="layoutProps"
    :layout-setting="layoutSetting"
    @setting-change="appStore.changeSettingLayout"
  />
</template>
